<template>
    <div style="background-color: #ECF5FF;">
        <!-- 顶部导航条 -->
        <div class="hd">
            <!-- 图片调整居中！！！！ -->
            <div class="mine-png">
                <!-- <router-link to="/mine/" class="button">
                    <img src="../../assets/themes/images/test/test1.jpg" height="44" width="45" style="border-radius:100%;"/>
                </router-link> -->
                <img is-link @click="showPopup" src="../../assets/themes/images/test/test1.jpg" height="44" width="45" style="border-radius:100%;"/>
                <van-popup v-model="show_mine" position="left"  :style="{ height: '100%', width:'80%' }">
                    <mine></mine>
                </van-popup>
                <van-popup v-model="show_login" position="left"  :style="{ height: '100%', width:'80%' }">
                    <no_login></no_login>
                </van-popup>
            </div>
            <div class="go-an-find">
                <router-link to="/find/" class="gofindfont" style="text-decoration:none">go & find</router-link>
            </div>
            <div class="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder=">>>>">
                    <span class="input-group-btn">
                        <button class="btn" type="button"><img src="../../assets/themes/images/search.png" height="15px" width="15px" /></button>
                    </span>
                </div>
            </div>
        </div>
        <br />
        <div class="content-css">
            <router-view></router-view>
        </div>
            
            <!-- 底部导航条 -->
        <div class="ft">
            <!-- 按钮组 -->
            
            <router-link to="/find/" class="btn-gp-item button" style="width: 30%; margin-left: 2.5%; margin-right: 2.5%">
                <img src="../../assets/themes/images/find.png" height="25" width="25" style="margin-top: 13.5px;"/>
            </router-link>
            
            <router-link to="/share/" class="btn-gp-item button" style="width: 30%;">
               <img src="../../assets/themes/images/status.png" height="25" width="25" style="margin-top: 13.5px;"/>
            </router-link>
           
            <router-link to="/go/" class="btn-gp-item button" style="width: 30%; margin-left: 2.5%; margin-right: 2.5%">
                <img src="https://gaf.oss-cn-beijing.aliyuncs.com/sysneed/weather.png" height="25" width="25" style="margin-top: 13.5px;"/>
            </router-link>
            
        </div>
        
    </div> 
</template>

<script>
import Mine from 'components/mine/Mine.vue';
import no_login from 'components/login/no-login.vue';

import Vue from 'vue'
// vant中的弹出框
import { Popup,Cell } from 'vant';
import 'vant/lib/popup/style';
import 'vant/lib/cell/style'
Vue.use(Popup)
Vue.use(Cell)
// 使vant适应pc端
import '@vant/touch-emulator'

export default{
    components:{
        Mine,
        no_login,
    },
    data(){
        return{
            show_login:false,
            show_mine:false,
        }
    },
    methods:{
        showPopup() {
            if (JSON.parse(localStorage.getItem('userstatus')) != 'login'){
                // console.log(111111111)
                this.show_login = true
            }
            else{
                // console.log(222222222)
                this.show_mine = true
            }
        }
    },
}
</script>
<style scoped>
    @import "../../assets/themes/css/header-style.css";
</style>